<template>
  <div id="myOrder">
    <div class="title">
      <i class="el-icon-star-on"></i>
      <span>支付订单</span>
      <i class="el-icon-star-on"></i>
    </div>
    <div class="info">
      <div id="front">
        <span>商品</span>
        <span>详情</span>
      </div>
      <div id="back">
        <span>卖家</span>
        <span>数量</span>
        <span>单价</span>
        <span>状态</span>
      </div>
    </div>
    <div id="bought">
      <order
        v-for="i in bought"
        :key="i.index"
        :img="i.image"
        :name="i.name"
        :description="i.description"
        :sellername="i.sellerUsername"
        :price="i.price"
        :number="i.number"
        :total="i.total"
        :isConfirmed="i.isConfirmed"
        :point="i.point"
        :time="i.time"
        :oid="i.oid"
        :isBuyer="true"
        @func="deleteOrder"
      ></order>
      <!-- <order 
            v-for="i in 1"
            :key="i.index"
            img="https://img20.360buyimg.com/n0/s80x80_jfs/t1/176665/17/7135/196173/608b605aEfcd15ef8/89329ba17947348e.jpg.dpg"
            name="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听力翻译语法自营包邮"
            description="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮"
            sellername="Spark星火英语Spark星火英语"
            price="55.00"
            number="12"
            total="342"
            :isBuyer="true"
            :isConfirmed="true"
            :point="10"
            time="2021.5.27"
            oid="3"
            @func="deleteOrder"
            ></order> -->
      <!-- <order
        v-for="i in 1"
        :key="i.index"
        img="https://img20.360buyimg.com/n0/s80x80_jfs/t1/176665/17/7135/196173/608b605aEfcd15ef8/89329ba17947348e.jpg.dpg"
        name="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听力翻译语法自营包邮"
        description="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮"
        sellername="Spark星火英语Spark星火英语"
        price="55.00"
        number="12"
        total="342"
        :isBuyer="true"
        :isConfirmed="false"
        :point="10"
        time="2021.5.27"
        oid="2"
        @func="deleteOrder"
      ></order> -->
    </div>
    <div class="title">
      <i class="el-icon-star-on"></i>
      <span>收入订单</span>
      <i class="el-icon-star-on"></i>
    </div>
    <div class="info">
      <div id="front">
        <span>商品</span>
        <span>详情</span>
      </div>
      <div id="back">
        <span>买家</span>
        <span>数量</span>
        <span>单价</span>
        <span>状态</span>
      </div>
    </div>
    <div id="sold">
      <order
        v-for="i in sold"
        :key="i.index"
        :img="i.image"
        :name="i.name"
        :description="i.description"
        :sellername="i.buyerUsername"
        :price="i.price"
        :number="i.number"
        :total="i.total"
        :isConfirmed="i.isConfirmed"
        :point="i.point"
        :time="i.time"
        :oid="i.oid"
        :isBuyer="false"
      ></order>
      <!-- <order 
            v-for="i in 1"
            :key="i.index"
            img="https://img20.360buyimg.com/n0/s80x80_jfs/t1/176665/17/7135/196173/608b605aEfcd15ef8/89329ba17947348e.jpg.dpg"
            name="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听力翻译语法自营包邮"
            description="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮"
            sellername="Spark星火英语Spark星火英语"
            price="55.00"
            number="12"
            total="342"
            :isBuyer="false"
            :isConfirmed="true"
            :point="10"
            time="2021.5.27"
            oid="4"
            @func="deleteOrder"
            ></order> -->
      <!-- <order 
            v-for="i in 1"
            :key="i.index"
            img="https://img20.360buyimg.com/n0/s80x80_jfs/t1/176665/17/7135/196173/608b605aEfcd15ef8/89329ba17947348e.jpg.dpg"
            name="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听力翻译语法自营包邮"
            description="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮"
            sellername="Spark星火英语Spark星火英语"
            price="55.00"
            number="12"
            total="342"
            :isBuyer="false"
            :isConfirmed="false"
            :point="10"
            time="2021.5.27"
            oid="3"
            @func="deleteOrder"
            ></order> -->
    </div>
  </div>
</template>

<script>
import order from "../components/order.vue";
import { request } from "../network/request.js";
export default {
  components: {
    order,
  },
  data() {
    return {
      sold: [],
      bought: [],
    };
  },
  methods: {
    deleteOrder(point, oid) {
      console.log(point);
      console.log(oid);
      request({
        url: "myOrder",
        method: "post",
        data: {
          point: point,
          oid: oid,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.res == 1) {
          this.$message({
            message: "评分成功",
            type: "success",
          });
        }
      });
    },
  },
  created() {
    request({
      url: "myOrder",
      method: "get",
    }).then((res) => {
      console.log(res);
      (this.sold = res.data.sold), (this.bought = res.data.bought);
    });
  },
};
</script>

<style scoped>
#myOrder {
  background-color: #fff;
}

.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 25px;
  padding-bottom: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  width: 200px;
}

.title i {
  padding: 5px;
}

.info {
  display: flex;
  justify-content: space-around;
  background-color: rgb(232, 232, 232);
  margin: 10px 10px;
  padding: 10px 0;
}

#front,
#back {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

#sold,
#bought {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>